<template >
    <div class="test">
        <div class="w1200" v-if="isSubmit" style="position: relative;">
            <div class="testVal">
                <div class="testHead"
                    v-if="dataJs && dataJs[0].data && dataJs[0].data[0].testpaper && dataJs[0].data[0].testpaper.name">
                    {{ dataJs[0].data[0].testpaper.name }}
                </div>
                <div class="testBox" v-for="(item, idx) in dataJs" :key="idx">
                    <div class="title">
                        <div class="testTitle">
                            {{ item.tixing }}
                        </div>

                    </div>

                    <div :id="'test' + it.topic_id" class="testCon" v-for="(it, i) in item.data">
                        <!-- <div>
                            {{ get(it) }}
                        </div> -->
                        <div style="display: flex;margin: 20px 0 0;line-height: 36px; ">
                            <div v-if="it.type != 2">
                                {{ it.number }}.
                            </div>
                            <div v-if="it.stem">
                                {{ it.stem }}
                            </div>
                        </div>
                        
                        <div v-if="$route.query.key == 'subjectBank'&&it.type!=2">
                            <div v-if="it.sel_image!=''">
                                <img :src="it.sel_image" alt="">
                            </div>
                            <div class="testText"
                                :class="{ active: actives[it.topic_id].indexOf(it.topic_id + '/' + t[0]) > -1 }"
                                @click.stop="queryType == 3?ciickFun(t, idx, it):''"
                                v-for='(t, ix) in !it.sel&&it.type!=2 || it.sel.length == 0&&it.type!=2 || it.sel[0] == ""&&it.type!=2 ?selData[it.pid]&&selData[it.pid].sel?selData[it.pid].sel:[]  : it.sel'>
                                {{ t }}
                                <div style="display: none;">
                                    {{ num }}
                                </div>
                            </div>
                        </div>
                        <div v-if="$route.query.key == 'subjectBank'&&it.type==2&&it.sel_image!=''">
                            <div class="testText">
                                <img :src="it.sel_image" alt="">
                                <div style="display: none;">
                                    {{ num }}
                                </div>
                            </div>
                        </div>


                        <div v-if="it.type != 2&&isZt&&$route.query.key != 'subjectBank'">
                            <!-- {{ it.pid }} -->
                            <!-- {{ selData[it.pid] }} -->

                            <!-- {{ it.sel?it.sel:selData[it.pid].sel }} -->

                            <div class="testText"
                                :class="queryType == 3?{ active: actives[it.topic_id].indexOf(it.topic_id + '/' + t[0]) > -1 }:t.search(it.myanswer)?it.answer == it.myanswer?'sueColor':'errColor':''"
                                @click.stop="queryType == 3?ciickFun(t, idx, it):''"
                                v-for='(t, ix) in !it.sel || it.sel.length == 0 || it.sel[0] == "" ?selData[it.pid]&&selData[it.pid].sel?selData[it.pid].sel:[]  : it.sel'>
                                {{ t }}
                                <div style="display: none;">
                                    {{ num }}
                                </div>
                            </div>
                        </div>
                        <div v-if="it.type != 2&&!isZt&&$route.query.key != 'subjectBank'">
                            <!-- {{ it.pid }} -->
                            <!-- {{ selData[it.pid] }} -->

                            <!-- {{ it.sel?it.sel:selData[it.pid].sel }} -->

                            <div class="testText"
                                :class="it.myanswer?it.answer.search(it.myanswer)>-1&&t.search(it.myanswer)>-1?'sueColor':t.search(it.myanswer)>-1?'errColor':'':''"
                                @click.stop="queryType == 3?ciickFun(t, idx, it):''"
                                v-for='(t, ix) in !it.sel || it.sel.length == 0 || it.sel[0] == "" ?selData[it.pid]&&selData[it.pid].sel?selData[it.pid].sel:[]  : it.sel'>
                                {{ t }}
                                <div style="display: none;">
                                    {{ num }}
                                </div>
                            </div>
                        </div>
                        <div class="collect" >
                            <span style="cursor: pointer; " @click="collect(it)">
                                <i class="collectIcon"
                                    :class="it.collect == 0 ? 'el-icon-star-off' : 'el-icon-star-on active'"></i>
                                {{ it.collect == 0 ? '收藏' : '已收藏' }}
                            </span>

                        </div>
                        <div style="display: none;">
                            {{ num }}
                        </div>
                        <div v-if="isDrills[it.topic_id]&&$route.query.key != 'startAnswer'&&$route.query.key != 'subjectBank'" class="analysis">
                            <div class="analysisHead" :class="actives[it.topic_id]&&actives[it.topic_id].length>0?returnClass(actives[it.topic_id],it.answer)?'sueColor':'errColor':''">
                                <span>正确答案:{{ it.answer }}</span>
                                <!-- <span>我的答案:{{ it.myanswer }}</span> -->
                            </div>
                            <div class="analysisBtm" :class="actives[it.topic_id]&&actives[it.topic_id].length>0?returnClass(actives[it.topic_id],it.answer)?'sueBD':'errBD':''">
                                解析:{{ it.exp }}
                            </div>
                        </div>
                        <div v-if="queryType != 3&&$route.query.key != 'startAnswer'&&$route.query.key != 'subjectBank'" class="analysis">

                            <div class="analysisHead" :class="it.myanswer == it.answer?'sueColor':'errColor'">
                                <span>我的答案:{{ it.myanswer }}</span>
                                <span>正确答案:{{ it.answer }}</span>
                            </div>
                            <div class="analysisBtm" :class="it.myanswer == it.answer?'sueBD':'errBD'">
                                解析:{{ it.exp }}
                            </div>
                        </div>
                       
                    </div>
                    <!-- <test v-for="(it, i) in item.data" :test="it" ref="test"></test> -->

                </div>
                <div v-if="isTime&&$route.params.model!=2&&queryType == 3 || timeVal < 1&&$route.params.model!=2&&queryType == 3" class="mask">
                    <i class="maskIcon el-icon-alarm-clock"></i>
                </div>
            </div>
            <div class="answerBox">
                <div v-if="queryType == 3&&timeVal>0">
                    <div class="timeBtns" >
                        <div class="timeBtnsTitle">
                            <span class="tA1"></span>
                            <span class="tA2">
                                计时器
                            </span>
                        </div>
                        <div class="tA3" @click="timeVal > 0 ? timeFun(isTime ? 'add' : 'clear') : ''">
                            {{ isTime ? '继续' : timeVal > 0 ? '暂停' : '已结束' }}
                            <i v-if="timeVal > 0" class="timeBtnsIcon"
                                :class="isTime && timeVal > 0 ? 'el-icon-video-pause' : 'el-icon-video-play'"></i>

                        </div>
                    </div>

                    <!-- {{ timeText }} -->
                    <div class="answerTimeBox">
                        <div v-for="(t, k) in timeText" :key="k" class="times">
                            <span class="timeVal">
                                {{ t }}
                            </span>
                            <span v-if="k != 2" style="width:50px;text-align:center;font-size:30px; ">
                                :
                            </span>

                        </div>
                    </div>
                </div>
                <div class="timeBtnsTitle" style="margin-bottom:30px;">
                    <span class="tA1"></span>
                    <span class="tA2">
                        答题卡
                    </span>
                </div>
                <div style="max-height:400px;overflow-y:auto; ">
                    <div v-for="(item, index) in dataJs" :key="index">
                        <div class="answerTitle">
                            {{ item.tixing }}
                        </div>
                        <div class="answerCon">
                            <div @click="answerClick(it)" v-if="it.type != 2" class="answerVal"
                                :class="{ answerActive: actives[it.topic_id] && actives[it.topic_id].length > 0 }"
                                v-for="(it, idx) in item.data" :key="idx">
                                <div>
                                    {{ it.number }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div v-if="queryType == 3&&$route.params.model!=2" class="testBtn" @click.stop="submit">
                    马上交卷
                </div>
            </div>
        </div>

        <div v-if="!isSubmit" class="total">
            <div class="w1200">


                <div class="title">
                    答题统计
                </div>
                <div class="cTitle">
                    {{ dataJs && dataJs[0].data && dataJs[0].data[0].testpaper && dataJs[0].data[0].testpaper.name?dataJs[0].data[0].testpaper.name:'' }}
                </div>
                <div class="totalText">
                    <div>
                        <div class="num">
                            <div class="texttitle">
                                本次成绩
                            </div>
                            <div>
                                <span class="numVal">
                                    {{ digData.score ?digData.score:0}}
                                </span>
                                <span>
                                    分
                                </span>
                            </div>
                        </div>

                    </div>
                    <div class="btmVal">
                        <div>
                            <div class="texttitle">
                                总题数
                            </div>
                            <div>
                                <span class="numText">
                                    {{ digData.total ?digData.total:0}}
                                </span>
                                <span>
                                    道
                                </span>
                            </div>
                        </div>
                        <div>
                            <div class="texttitle">
                                答对题
                            </div>
                            <div>
                                <span class="numText">
                                    {{ digData.correct?digData.correct:0 }}
                                </span>
                                <span>
                                    道
                                </span>
                            </div>
                        </div>
                        <div>
                            <div class="texttitle">
                                总分
                            </div>
                            <div>
                                <span class="numText">
                                    {{ digData.zongfen ?digData.zongfen:0}}
                                </span>
                                <span>
                                    分
                                </span>
                            </div>
                        </div>
                        <div>
                            <div class="texttitle">
                                实际用时
                            </div>
                            <div>
                                <span class="numText">
                                    {{ digData.time ?digData.time:0}}
                                </span>
                                <span>
                                    分钟
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="" class="answerV">
                    <div v-for="(item, index) in dataJs" :key="index">
                        <div class="answerTitle">
                            {{ item.tixing }}
                        </div>

                        <div class="answerCon">
                            <div v-if="it.type != 2" class="answerVal"
                                :class="{ answerActive: actives[it.topic_id] && actives[it.topic_id].length > 0 }"
                                v-for="(it, idx) in item.data" :key="idx">
                                <div>
                                    {{ it.number }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
import test from "./components/test.vue"
// const dataJs = require('./data.json')

export default {
    name: "test",
    mixins: [pagePublic],
    components: {
        test
    },
    data() {
        return {
            isZt:false,
            queryType:3,
            digData:{},
            isSubmit: true,
            testpaperlog_id: '',
            isTime: false,
            timeVal: 7200,
            timeText: '',
            interval: '',
            num: 0,
            // isDrills: {},
            dataJs: [],
            selData: {},
            isDrills: {},
            actives: {}
            // urls:{
            //     list: {
            //         url:this.$api.tem.list,
            //         method:"get",
            //         sync:false,
            //     },
            //     add:this.$api.tem.add,
            //     edit:this.$api.tem.edit,
            //     del:this.$api.tem.del
            // },


        }
    },
    computed: {
        ...mapState(['configInfo']),

    },

    created() {
        console.log(1111,this.$route.query.time,3333)
        // console.log(dataJs)
        if(this.$route.params.explain == 1){
            this.queryType = 1
        }
        if(this.$route.query.logId){
            this.isZt = this.$route.params.explain==1?false:true
            this.testpaperlog_id = this.$route.query.logId
            this.getListData1()
            if(this.$route.params.time>0&&this.$route.params.explain!=1) {
                this.timeVal = Number(this.$route.params.time) * 60

                this.isTime = true
                this.timeFun('add')
            } 
        }else if(this.$route.query.type){
            console.log(22222)

            this.isZt = false
            this.queryType = this.$route.query.type
            this.getData()
        }else{
            console.log(33333)
            if(this.$route.params.time){
                console.log(111111)
                this.isZt = true
                this.getListData()
                if(this.$route.params.time>0&&this.$route.params.explain!=1) {
                    this.timeVal = Number(this.$route.params.time) * 60

                    this.isTime = true
                    this.timeFun('add')
                } 
            
            }
          
        }
        // if(this.$route.query.type){
        //     console.log(22222)

        //     this.isZt = false
        //     this.queryType = this.$route.query.type
        //     this.getData()
        // }
    },
    methods: {
        ...mapMutations(['set_configInfo']),
        // get(it){
        //     if(it.type == 2){
        //         this.selData[it.topic_id] = {sel:{...it.sel},stem:it.stem}
        //     }
        // },
        returnClass(data,val){
            console.log(data,val)
            let idx = ''
           data.map(e=>{idx = val.search(e.split('/')[1])})
           console.log(idx)
            return idx>-1?true:false

        },
        getData(){
            this.$api.study.collectAnswer.list({
                type:this.$route.query.type
            }).then(res => {
                this.dataJs = res.data || []
                if (res.data && res.data.length > 0) {
                    this.getSelData(res.data)
                }

            })
        },
        getListData1(){
            this.$api.study.startAnswer.topic({
                model: 2,
                testpaper_id: this.$route.params.testpaper_id,
                explain: 1,
                testpaperlog_id: this.$route.query.logId,
            }).then(res => {
                this.dataJs = res.data || []
                if (res.data && res.data.length > 0) {
                    this.getSelData(res.data)

                }
            })
        },
        getListData() {
            this.$api.study.startAnswer.add({
                testpaper_id: this.$route.params.testpaper_id,
                platform: 'web',
                device: ''
            }).then(res => {
                this.testpaperlog_id = res.data
                this.$api.study.startAnswer.topic({
                    model: this.$route.params.model,
                    testpaper_id: this.$route.params.testpaper_id,
                    explain: this.$route.params.explain,
                    testpaperlog_id: '',
                }).then(res => {
                    this.dataJs = res.data || []
                    if (res.data && res.data.length > 0) {
                        this.getSelData(res.data)

                    }
                })
            })

        },
        timeFun(type) {
            let that = this
            // setInterval(function(){
            //     that.num++
            // },1000)
            if (type == 'over') {
                this.isTime = false
                clearInterval(this.interval)
                return
            }
            if (type == 'add') {
                this.isTime = false
                this.timeVal--
                this.timePlay(this.timeVal)

                this.setIntervalFun('timeVal')
            } else {
                this.isTime = true
                clearInterval(this.interval)
            }
        },
        setIntervalFun(key) {
            this.interval = setInterval(() => {
                this[key]--
                this.timePlay(this[key])
                // this.num++
                if (this[key] == 0) {
                    this.isTime = false
                    clearInterval(this.interval)
                }
            }, 1000)
        },
        timePlay(value) {
            var secondTime = parseInt(value)// 秒
            var minuteTime = 0// 分
            var hourTime = 0// 小时
            if (secondTime > 60) { // 如果秒数大于60，将秒数转换成整数
                // 获取分钟，除以60取整数，得到整数分钟
                minuteTime = parseInt(secondTime / 60)
                // 获取秒数，秒数取佘，得到整数秒数
                secondTime = parseInt(secondTime % 60)
                // 如果分钟大于60，将分钟转换成小时
                if (minuteTime > 60) {
                    // 获取小时，获取分钟除以60，得到整数小时
                    hourTime = parseInt(minuteTime / 60)
                    // 获取小时后取佘的分，获取分钟除以60取佘的分
                    minuteTime = parseInt(minuteTime % 60)
                }
            }
            let s, m, h;
            h = parseInt(hourTime) > 9 ? parseInt(hourTime) : '0' + parseInt(hourTime)
            m = parseInt(minuteTime) > 9 ? parseInt(minuteTime) : '0' + parseInt(minuteTime)
            s = parseInt(secondTime) > 9 ? parseInt(secondTime) : '0' + parseInt(secondTime)
            this.$nextTick(() => {
                this.timeText = [h, m, s]
            })
        },

        returnSel(it) {
            let data = []
            if (!it.sel || it.sel.length == 0 || it.sel[0] == "") {
                data = this.selData[it.pid] && this.selData[it.pid].sel ? this.selData[it.pid].sel : []
            } else {
                data = it.sel
            }
            // it.type == 3 ? selData[it.pid].sel : it.sel
            return it.type == 3 && !it.sel ? this.selData[it.pid].sel : it.sel
        },
        getSelData(dataJs) {
            dataJs.forEach(item => {
                if (item.data) {
                    item.data.forEach(it => {
                        this.actives[it.topic_id] = []
                        // 练习模式
                        if (this.$route.query.key != "startAnswer") {
                            this.isDrills[it.topic_id] = false
                        }
                        if (it.type == 2) {
                            this.selData[it.topic_id] = { sel: [...it.sel], stem: it.stem }

                        }
                    })
                }
            })
        },
        ciickFun(t, i, it) {
            console.log(t[0],this.actives[it.topic_id]);
            // if()
            this.$nextTick(()=>{

            
                if (it.tixing == 49) {
                    let isData = this.actives[it.topic_id] ? this.actives[it.topic_id].indexOf(it.topic_id + '/' + t[0]) : -1
                    if (isData > -1) {
                        this.actives[it.topic_id].splice(isData, 1)
                        this.num++

                    } else {
                        this.actives[it.topic_id] = [...this.actives[it.topic_id], it.topic_id + '/' + t[0]]
                        this.num++

                    }
                        // 答题模式
                    if (this.$route.params.model==2) {
                        this.$nextTick(()=>{
                        this.isDrills[it.topic_id] = true

                        })
                    } 
                    else if(this.$route.params.explain!=1){
                        this.$nextTick(() => {
                            this.num++;
                            this.isDrills[it.topic_id] = true
                        })
                    }
                } else {
                    this.actives[it.topic_id] = [];
                    this.actives[it.topic_id] = [...this.actives[it.topic_id], it.topic_id + '/' + t[0]]
                    this.num++
                    // 答题模式
                    if (this.$route.params.model==2) {
                        this.$nextTick(()=>{
                        this.isDrills[it.topic_id] = true

                        })
                    } 
                    else if(this.$route.params.explain!=1){
                        this.$nextTick(() => {
                            this.num++;
                            this.isDrills[it.topic_id] = true
                        })
                    }
                }
            })
            // setTimeout(() => {
                
            // }, 300);
            // console.log(t[0],this.actives[it.topic_id]);

        },
        answerClick(it) {
            const section = document.getElementById('test' + it.topic_id);
            if (section) {
                section.scrollIntoView({ behavior: 'smooth' });
            }
        },
        // 收藏
        async collect(it) {
            // return it.
            let res = await this.$api.study.startAnswer.collectAdd({ topic_id: it.topic_id, platform: 'web', device: '' })
            return res.status == 200?it.collect = it.collect == 1 ? 0 : 1:''
            // return it.collect = it.collect == 1 ? 0 : 1

        },
        // 交卷
        submit() {
            // this.actives
            let num = 0
            for (const key in this.actives) {
                if (this.actives[key].length != 0) {
                    num++ 
                    // return this.$message({
                    //     message: '',
                    //     type: 'error',
                    // })
                }
            }
            let len = Object.keys(this.actives)
            if(num != len.length){
                this.$alert('您还有未完成的试题！是否继续交卷？', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        callback: action => {
                            this.setJson()
                        }
                    });
            }else{
                this.setJson()
            }
            // this.setJson()
            // return 

        },
        setJson() {
            let answer = []
            for (const key in this.actives) {
                if (this.actives[key]) {
                    this.actives[key].forEach(it => {
                        let val = it.split('/')
                        answer = [...answer, { topic_id: val[0], answer: val[1] }]
                    })
                }
            }
            console.log(answer, 222222)
            this.$api.study.startAnswer.handin({
                testpaperlog_id: this.testpaperlog_id,
                answer: JSON.stringify(answer)
            }).then((res) => {
                if (res.status == 200) {
                    this.digData = res.data
                    this.isSubmit = false
                    // this.$router.push('/study')
                    // this.$message({
                    //     message: '交卷成功！',
                    //     type: 'sucess',
                    // })
                } else {
                    return this.$message({
                        message: res.msg,
                        type: 'error',
                    })
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.test {
    width: 100%;
    // height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #f6f7fc;

    .active {
        color: var(--bg-color, '#FF6900');
    }
    .errColor{
        color: #ff4d00;
    }
    .errBGColor{
        background-color: #ff4d00;
    }
    .errBD{
        border:1px dashed #ff4d00;
    }
    .sueColor{
        color: #7ac295;
    }
    .sueBGColor{
        background-color: #7ac295;
    }
    .sueBD{
        border:1px dashed #7ac295;
    }
    .testHead {
        font-size: 26px;
        font-weight: 600;
        color: var('#333333');
        margin: 30px 0;
        text-align: center;
    }

    // justify-content: center;
    // align-items: center;
    .testVal {
        width: 1000px;
        height: 100%;
        display: flex;
        margin: 50px 0;
        // justify-content: center;
        // align-items: center;
        flex-direction: column;
        font-size: 20px;
        font-weight: 600;
        color: #000;
        background-color: #fff;
        border-radius: 5px;
        padding: 50px 0;
        overflow-y: auto;
        position: relative;

        .testBox {
            width: 100%;
        }

        .testTitle {
            display: inline-block;
            padding: 5px 30px;
            margin: 20px 0;
            background-color: var(--bg-color, '#FF6900');
            color: #fff;
        }

        .testCon {
            // margin-left: 20px;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .analysis{
            
            .analysisHead{
                width: 100%;
                padding: 20px 100px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-around;
                font-weight: 400;
                // color: var(--bg-color,'#FF6900');
            }
            .analysisBtm{
                font-weight: 400;
                font-size: 18px;
                padding: 20px;
                // border: 1px dashed var(--bg-color,'#FF6900');
            }
        }
        .testText {
            margin: 15px 0;
            font-weight: 400;
            font-size: 16px;
            line-height: 28px;
            cursor: pointer;

        }

        .collect {
            font-size: 16px;
            color: #9f9f9f;
            font-weight: 400;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .collectIcon {
                font-size: 20px;
            }
        }

        .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            inset: 0;
            z-index: 99;
            background-color: rgba(255, 255, 255, .7);
            display: flex;
            align-items: center;
            justify-content: center;

            .maskIcon {
                position: fixed;
                top: 50%;
                left: 50%;
                width: 100px;
                height: 100px;
                margin-top: -50px;
                margin-left: -150px;
                font-size: 100px;
                color: #333;
                animation: blink 2s linear infinite alternate;
            }

            @keyframes blink {
                0% {
                    opacity: 1;
                }

                100% {
                    opacity: 0;
                }
            }
        }
    }

    .answerBox {
        position: fixed;
        right: 150px;
        top: 130px;
        width: 340px;
        // max-height: 300px;
        // overflow-y: auto;
        // background
        padding: 30px;
        box-sizing: border-box;
        background-color: #fff;
        // height: 400px;
        box-shadow: 0px 0px 6px #ffdaca;
        border-radius: 8px;
        z-index: 999;

        .timeBtnsTitle {
            display: flex;
            align-items: center;

            .tA1 {
                display: inline-block;
                width: 5px;
                height: 20px;
                border-radius: 6px;
                margin-right: 10px;
                background-color: var(--bg-color, '#FF6900');
            }

            .tA2 {
                font-size: 22px;
            }
        }

        .timeBtns {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .tA3 {
                display: flex;
                align-items: center;
                font-size: 20px;
                cursor: pointer;

                .timeBtnsIcon {
                    width: 25px;
                    height: 25px;
                    color: #fff;
                    display: flex;
                    padding-top: 1px;
                    margin-left: 5px;
                    align-items: center;
                    justify-content: center;
                    border-radius: 6px;
                    font-weight: 900;
                    background-color: var(--bg-color, '#FF6900');
                }
            }
        }

        .answerCon {
            display: flex;
            flex-wrap: wrap;

            .answerVal {
                // padding: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                margin: 10px 5px;
                border-radius: 4px;
                color: #333;
                background-color: #f0f0f0;
                cursor: pointer;
            }

            .answerActive {
                background-color: var(--bg-color, '#FF6900');
                color: #fff;

            }
        }

        .testBtn {
            width: 100%;
            height: 40px;
            background-color: var(--bg-color, '#FF6900');
            color: #fff;
            border-radius: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin-top: 30px;
        }

        .answerTimeBox {
            display: flex;
            align-items: center;
            margin: 30px 15px;

            .times {
                display: flex;
                align-items: center;
            }

            .timeVal {
                display: flex;
                width: 50px;
                height: 50px;
                font-size: 22px;
                align-items: center;
                justify-content: center;
                // background-color:#ccc;
                border-radius: 5px;
                // border: 1px solid #ccc;
                box-shadow: 0px 0px 5px var(--bg-color, '#FF6900');
            }
        }
    }

    .total {
        // width: 100vw;
        // height: 100vh;
        // overflow-y: auto;
        padding-top: 40px;
        box-sizing: border-box;
        padding-bottom: 50px;
        .title {
            font-size: 38px;
            text-align: center;
            color: #999;
            font-weight: 900;
        }
        .cTitle{
            font-size: 28px;
            margin-top: 30px;
            text-align: center;
            color: #333;
            font-weight: 700;

        }
        .num{
            text-align: center;
            font-size: 22px;
            margin-bottom: 30px;
            .numVal{
                font-size: 100px;
                color: var(--bg-color,'#FF6900');
                font-weight: 900;
                

            }
        }
        .totalText{
            margin: 30px 0;
            display: flex;
            flex-direction: column;
            width: 100%;
            .btmVal{
                display: flex;
                width: 100%;
                justify-content: space-around;
                align-items: center;
                .numText{
                    color: #5e5e5e;
                    font-weight: 900;
                    font-size: 28px;
                }
            }
        }
        .answerV {
            padding: 30px;
            border-radius: 15px;
            border: 1px dashed var(--bg-color, '#FF6900');
            .answerCon {
                display: flex;
                flex-wrap: wrap;

                .answerVal {
                    // padding: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 30px;
                    height: 30px;
                    margin: 10px 5px;
                    border-radius: 4px;
                    color: #333;
                    background-color: #f0f0f0;
                    cursor: pointer;
                }

                .answerActive {
                    background-color: var(--bg-color, '#FF6900');
                    color: #fff;

                }
            }
        }
    }
}
</style>